import React, { useState, useEffect } from 'react';
import { Carousel, Flex, NavBar, Icon } from 'antd-mobile';
import styles from './index.less';

import mubiao from '@/assets/img/mubiao.png';
import chakanbubiao from '@/assets/img/chakanbubiao.png';
import more from '@/assets/img/more.png';
import home from '@/assets/img/home.png';
import jinxingzhong from '@/assets/img/jinxingzhong.png';
import yijinwanc from '@/assets/img/yijinwanc.png';

import router from 'umi/router';
import Xgplayer from 'xgplayer-react';
import NoData from '@/components/NoData';

import { getQueryVal } from '@/utils/utils';

export default function Video({ location }) {
  console.log(location);
  const videoUrls = location.query.url;
  const getConfig = url => {
    return {
      id: url,
      url,
      width: '100%',
      height: 200,
      rotateFullscreen: true,
      lang:'zh-cn'
    };
  };

  return (
    <>
      <NavBar
        className="nav-bar"
        mode="light"
        icon={<Icon type="left" />}
        onLeftClick={() => router.goBack()}
        rightContent={
          <img
            onClick={() => {
              router.replace('/');
            }}
            className="home-icon"
            src={home}
          />
        }
      >
        视频播放
      </NavBar>
      {videoUrls?.map((item, index) => (
        <div key={item} className={index === 0 ? styles.outside : styles.outsideN}>
          <div className={styles.card}>
            <div className={styles.train}>
              <Xgplayer config={getConfig(item)}></Xgplayer>
            </div>
          </div>
        </div>
      ))}
      {!videoUrls ||
        (videoUrls.length === 0 && (
          <div className={styles.outside}>
            <NoData />
          </div>
        ))}

      {/* <div className={styles.outside}>
        <div className={styles.card}>
          <div className={styles.title}>
            <div>今日培训</div>
          </div>
          <div className={styles.train}>
            <img src="http://img.nevergiveupt.top/2.png" />
          </div>
        </div>

        <div className={styles.card}>
          <div className={styles.title}>
            <div>热门课程</div>
            <span>
              更多 <img src={more} />{' '}
            </span>
          </div>
          <div className={styles.train}>
            <img src="http://img.nevergiveupt.top/6.png" />
          </div>
        </div>
      </div> */}
    </>
  );
}
